<script>
import UserApi from "../../api/user";
import UserForm from "../../components/user/UserForm.vue";

export default {
  components: { UserForm },
  inject: ["reload"],
  data() {
    return {
      userList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1,
      modelShow: false, //模态框是否显示
      modelTitle: "", //模态框标题
      modelAction: 0, //模态框索引
      newUser: {
        useranme: "",
        nickname: "",
        truename: "",
        avatar: "",
        role: ""
      },
      editUser: {
        id: 0,
        useranme: "",
        nickname: "",
        truename: "",
        avatar: "",
        role: ""
      },
      deleteUserId: 0,
      resetPasswordUserId: 0
    };
  },
  methods: {
    async getUserList(limit = -1, offset = -1) {
      try {
        const api = new UserApi();
        let res = await api.findAll(limit, offset);
        this.userList = res.data;
        console.log(this.userList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async getCount() {
      try {
        const api = new UserApi();
        let res = await api.getCount();
        this.total = res.data.total;
        console.log(this.total);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    goto(page) {
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getUserList(this.limit, this.offset);
    },
    closeModel() {
      this.modelShow = false;
      this.modelTitle = "";
      this.modelAction = 0;
    },
    showAddModel() {
      this.modelShow = true;
      this.modelTitle = "新增用户";
      this.modelAction = 1;
    },
    async add() {
      try {
        const api = new UserApi();
        let res = await api.add(this.newUser);
        if (res.code === 201 && res.data.lastID > 0) {
          this.$myMessageBox(res.msg);
          this.closeModel();
          this.reload(); //刷新
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    showEditModel(user) {
      this.modelShow = true;
      this.modelTitle = "修改用户";
      this.modelAction = 2;
      this.editUser = {};
      this.editUser = user;
    },
    async edit() {
      try {
        const api = new UserApi();
        let res = await api.edit(this.editUser);
        if (res.code === 200 && res.data.changes > 0) {
          this.$myMessageBox(res.msg);
          this.closeModel();
          this.reload(); //刷新
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    showDeleteModel(userId) {
      this.modelShow = true;
      this.modelTitle = "删除用户";
      this.modelAction = 3;
      this.deleteUserId = userId;
    },
    async del() {
      try {
        const api = new UserApi();
        let res = await api.delete(this.deleteUserId);
        if (res.code === 204 && res.data.changes > 0) {
          this.$myMessageBox(res.msg);
          this.closeModel();
          this.reload(); //刷新
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    showResetPasswordModel(userId) {
      this.modelShow = true;
      this.modelTitle = "重置用户密码";
      this.modelAction = 4;
      this.resetPasswordUserId = userId;
    },
    async resetPassword() {
      try {
        const api = new UserApi();
        let res = await api.resetPassword(this.resetPasswordUserId);
        if (res.code === 200 && res.data.changes > 0) {
          this.$myMessageBox(res.msg);
          this.closeModel();
          this.reload(); //刷新
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  async mounted() {
    this.curPage = 1;
    this.limit = this.pageSize;
    this.offset = 0;
    await this.getCount();
    await this.getUserList(this.limit, this.offset);
  },
  computed: {
    roleName() {
      return (role) => {
        return role === 1 ? "管理员" : "普通用户";
      };
    },
    formatLatLoginTime() {
      return (time) => {
        return new Date(time).toLocaleString();
      };
    }
  }
};
</script>

<template>
  <div class="admin-user-list">
    <table>
      <caption>
        <a class="button" href="javascript:void(0);" @click="showAddModel">新增</a>
      </caption>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>序号</th>
          <th>用户名</th>
          <th>头像</th>
          <th>昵称</th>
          <th>姓名</th>
          <th>角色</th>
          <th>最后登录时间</th>
          <th>最后登录IP</th>
          <th>登录次数</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="user.id">
          <td><input type="checkbox" :value="user.id" /></td>
          <td>{{ index + 1 }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.avatar }}</td>
          <td>{{ user.nickname }}</td>
          <td>{{ user.truename }}</td>
          <td>{{ roleName(user.role) }}</td>
          <td>{{ formatLatLoginTime(user.lastLoginTime) }}</td>
          <td>{{ user.lastLoginIp }}</td>
          <td>{{ user.loginCount }}</td>
          <td>
            <a class="button" href="javascript:void(0);" @click="showEditModel(user)">编辑</a>
            <a class="button" href="javascript:void(0);" @click="showDeleteModel(user.id)">删除</a>
            <a class="button" href="javascript:void(0);" @click="showResetPasswordModel(user.id)"
              >重置密码</a
            >
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="11">
            <my-pagination
              :total="total"
              :page-size="pageSize"
              :cur-page="curPage"
              :show-info="false"
              @goto="goto"
            />
          </td>
        </tr>
      </tfoot>
    </table>
    <my-model :title="modelTitle" @close-model="closeModel" v-if="modelShow">
      <template v-if="modelAction === 1">
        <user-form v-model="newUser" :is-add="true" @user-save="add" />
      </template>
      <template v-if="modelAction === 2"
        ><user-form v-model="editUser" :is-add="false" @user-save="edit"
      /></template>
      <template v-if="modelAction === 3">
        <div>
          <span>是否删除？</span>
          <button @click="del">确认</button>
          <button @click="closeModel">取消</button>
        </div>
      </template>
      <template v-if="modelAction === 4">
        <div>
          <span>是否重置密码？</span>
          <span>重置默认密码为123456</span>
          <button @click="resetPassword">确认</button>
          <button @click="closeModel">取消</button>
        </div>
      </template>
    </my-model>
  </div>
</template>

<style scoped>
table {
  border: 1px solid #e2daff;
  margin: auto;
  border-collapse: collapse;
  width: 100%;
}

caption {
  text-align: right;
  padding: 8px;
}

tr {
  border-top: 1px solid #e2daff;
  border-bottom: 1px solid #e2daff;
}

th,
td {
  padding: 8px;
}
</style>
